<template>
  <div>
    <a-select v-model="list.province" @change="changeProvince" style="width: 32%">
      <a-select-option value=""> 请选择 </a-select-option>
      <a-select-option :value="item.provinceCode" v-for="item in provinceData" :key="item.id">{{ item.provinceName }}</a-select-option>
    </a-select>
    <a-select v-model="list.city" @change="changeCity" style="width: 32%; margin-left: 1%">
      <a-select-option value=""> 请选择 </a-select-option>
      <a-select-option :value="item.cityCode" v-for="item in cityData" :key="item.id">{{ item.cityName }}</a-select-option>
    </a-select>
    <a-select v-model="list.area" @change="changeArea" style="width: 32%; margin-left: 1%">
      <a-select-option value=""> 请选择 </a-select-option>
      <a-select-option :value="item.areaCode" v-for="item in areaData" :key="item.id">{{ item.areaName }}</a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  name: 'Area',
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          province: '',
          city: '',
          area: ''
        }
      }
    }
  },
  data() {
    return {
      list: this.info, // 省市区id
      provinceData: [],
      cityData: [],
      areaData: [],
      listText: {
        province: '',
        city: '',
        area: ''
      } // 省市区中文
    }
  },
  created() {
    this.getProvinceData()
  },
  methods: {
    // 获取省
    getProvinceData() {
      this.$common.handlePost('/common/province').then((data) => {
        if (data.code === 200) {
          this.provinceData = data.data
        }
      })
    },
    // 改变省
    changeProvince(id, option) {
      this.list.city = ''
      this.list.area = ''
      this.$emit('ok', this.list)
      this.cityData = []
      this.areaData = []
      if (id) {
        this.$common.handlePost('/common/cities/' + this.list.province).then((data) => {
          if (data.code === 200) {
            this.cityData = data.data
          }
        })
      }
    },
    // 改变市
    changeCity(id, option) {
      this.list.area = ''
      this.$emit('ok', this.list)
      this.areaData = []
      if (id) {
        this.$common.handlePost('/common/areas/' + this.list.city).then((data) => {
          if (data.code === 200) {
            this.areaData = data.data
          }
        })
      }
    },
    // 改变区
    changeArea(id, option) {
      this.$emit('ok', this.list)
    }
  },
  watch: {
    info(val) {
      console.log(val)
      this.list = val
      this.listText = val
      this.cityData = []
      this.areaData = []
    }
  }
}
</script>
